uniapp app下使用地图组件 |
您所在的位置：网站首页 › uniapp 地图组件 › uniapp app下使用地图组件 |
|
uniapp 提供了地图组件，app端使用map推荐使用nvue，官网https://uniapp.dcloud.io/component/map 要显示的设置宽高，不要设置百分比 只支持 gcj02 坐标 示例，地图显示在上海区域，起点是虹桥火车站，当点击虹桥火车站这个地点marker，在地图上显示出目的地迪士尼，显示出路线图，并且控制在可视区域内 以下代码是在nvue中实现，只在app 中可用 坐标转换插件使用gcoord，https://github.com/hujiulong/gcoord 图标设置使用@2x,@3x的图标，在地图上会显示的清晰一点，其他的会很模糊 import gcoord from '../../common/gcoord.js' export default { data() { return { screenWidth: 0, screenHeight: 0, center: [121.506379, 31.245414], //地图中心点坐标，高德系经纬度 //百度坐标 points: { longitude: 121.346817, latitude: 31.203347, tolng: 121.671964, tolat: 31.148267 }, markers: [], includePoints: [], polyline:[], line: { width: 7, // dottedLine: true, arrowLine: true }, } }, onLoad() { var that = this; uni.getSystemInfo({ success: function(e) { that.screenWidth = e.screenWidth; that.screenHeight = e.screenHeight; } }) let center = this.transformBaiduToAm(this.center[0], this.center[1]); this.center = center;//可以通过设置地图的longitude和latitude属性来移动地图到不同的城市 //首先将百度坐标转为高德系，引入gcoord插件 let start = this.transformBaiduToAm(this.points.longitude, this.points.latitude); this.markers = [{ longitude: start[0], latitude: start[1], iconPath: '../../static/[email protected]', width: 30, height: 30 }]; this.start = start; }, onReady() { //路线检索，会返回两个地点之间的经纬度，最后连线 this.mapContext = uni.createMapContext('map', this); this.search = new plus.maps.Search(this.mapContext); let that = this; this.search.onRouteSearchComplete = function(state, result) { if (state == 0) { if (result.routeNumber |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |